Tablice s▒ to takie zmienne potrafi▒ce przechowywaµ wiele danych okre╢lonego typu. S▒ to zwykle informacje powi▒zane ze sob▒ w jaki╢ spos≤b, np: lista nazwisk, lista dostΩpnych urz▒dze± w systemie. Pewnie zapytacie, skoro s▒ to ca│e zbiory danych, to jak skutecznie mo┐na operawaµ na takiej tablicy, je┐eli jest to tylko jedna zmienna. Rozwi▒zanie jest banalne - wszystkie pole tablicy s▒ poindexowane (ka┐demu polu przypisana jest kolejna liczba licz▒c od zera w│▒cznie).

TablicΩ deklarujemy w nastΩpuj▒cy spos≤b:

Pracownicy = new Array;

Zauwa┐my, ┐e nie podali╢my, z ilu element≤w sk│adaµ siΩ bΩdzie tablica. Mo┐na tΩ wielko╢µ podaµ przy deklarowaniu:

Pracownicy = new Array(9);

Powy┐sza tablica zawiera 10 p≤l. Aby ustawiaµ lub odczytaµ dan▒ warto╢µ z tablicy, u┐ywamy indexu charakteryzuj▒cego dane pole w nawiasie kwadratowym za nazw▒ zmiennej, np:

Pracownicy[0] = "Abramowski";
Pracownicy[1] = "Malinowski"
Pracownicy[2] = "Kowalski"

Istnieje mo┐liwo╢µ zainicjowania warto╢ci p≤l tablicy ju┐ podczas deklaracji:

Pracownicy = new Array("Abramowski", "Malinowski", "Kowalski");

JavaScript umo┐liwia deklarowanie tablic wielowymiarowych, to znaczy takich, dla kt≤rych do opisania pola takiej tablicy wymagane jest podanie kilku index≤w. Tworzy siΩ j▒ w taki spos≤b, ┐e najpierw tworzymy standardow▒ tablicΩ, a w miejsce jej p≤l deklarujemy kolejne tablice:

Pracownicy = new Array(2);
Pracownicy[0] = new Array(1);
Pracownicy[1] = new Array(1);
Pracownicy[2] = new Array(1);

Pracownicy[0][0] = "Abramowski";
Pracownicy[0][1] = "ul. Poprzeczna 3";
Pracownicy[1][0] = "Malinowski";
Pracownicy[1][1] = "ul. Przybyszewskiego 95";
Pracownicy[2][0] = "Kowalski";
Pracownicy[2][1] = "ul. Piotrkowska 246";

Do sprawnego wykorzystywania tablic potrzebna Ci bΩdzie znajomo╢µ pΩtli.

Obiekt Array posiada kilka u┐ytecznych funkcji (metod). Oto one:

concat([element1], [element2] ...) - dodaje do tablicy kolejne pola lub pola z tablic. Elementy dodawane s▒ od lewej do prawej. Je┐eli element jest tablic▒ to wszystkie jego pola s▒ dodawane po kolei na koniec tablicy

join([separator]) - funkcja zwracaj▒ca warto╢µ typu String reprezentuj▒c▒ po│▒czone wszystkie elementy tablicy (opcjonalnie oddzielone separatorem)

pop() - usuwa ostatni element tablicy i zwraca go

push([element1], [element2] ...) - dodaje do tablicy element/elementy i zwraca now▒ d│ugo╢µ tablicy

reverse() - zwraca tablicΩ z odwr≤conymi elementami (ostatni jest pierwszy, itd)

sort([sortFunction]) - sortuje tablicΩ. Mo┐emy podaµ nazwΩ funkcji, kt≤ra bΩdzie okre╢laµ sortowanie. Normalnie dane s▒ sortowane wed│ug ich odpowiednik≤w w kodzie ASCII. Funkcja powinna byµ dwuparametrowa i zwracaµ WARTOª╞ UJEMNí - je┐eli pierwszy przekazany argument jest mniejszy od drugiego, ZERO - je┐eli argumenty s▒ sobie r≤wne, WARTOª╞ DODATNIí - je┐eli pierwszy argument jest wiΩkszy od drugiego.

splice(start, deleteCount, [element1], [element2] ...) - usuwa wyznaczon▒ czΩ╢µ tablicy, gdzie start okre╢la pocz▒tkowy index, a deleteCount ilo╢µ p≤l do usuniΩcia. Do tablicy wstawiane s▒ opcjonalnie w miejsce skasowanych p≤l nowe. Funkcja zwraca tablicΩ zawieraj▒c▒ skasowane elementy

toString() - zwraca │a±cuch tekstowy reprezentuj▒cy wszystkie elementy tablicy rozdzielone przecinkami

WiΩcej znajdziesz w dodatku - Array.

Na koniec tej lekcji chcia│bym przedstawiµ przyk│ad ilustruj▒cy dzia│anie tablic oraz ich metod. Jest on trochΩ bardziej skomplikowany ni┐ wszystkie przyk│ady do tej pory przedstawione w kursie, ale czyniΩ to celowo jako pewne powt≤rzenie wiadomo╢ci. Je╢li uwa┐nie studiowa│e╢ ten kurs, poni┐szy przyk│ad nie powinien sprawiµ Ci ┐adnych k│opot≤w. Je┐eli jednak co╢ wydaje Ci siΩ niejasne to przeczytaj odpowiedni▒ lekcjΩ jeszcze raz lub napisz do mnie. Poni┐szy kod wstawmy do sekcji g│owy:

<SCRIPT LANGUAGE="JavaScript">
<!--

Tablica = new Array();

 function dodaj(p_lub_k)
  {
   if (Tablica.length != 10)
    {
     if (document.forms["imiona"].imie.value != "")
      {
       if (p_lub_k == 'p')
        {
         for (i = Tablica.length; i >= 1; i--)
          {
           Tablica[i] = Tablica[i - 1];
          }
         Tablica[0] = document.forms["imiona"].imie.value;
         /* dla JavaScript w wersji co najmniej 5.5 piszemy poprostu:
            Tablica.unshift(document.forms["imiona"].imie.value);
         */
        }
       else
        {
         Tablica[Tablica.length] = document.forms["imiona"].imie.value;
         /* dla JavaScript w wersji co najmniej 5.5 piszemy poprostu:
            Tablica.push(document.forms["imiona"].imie.value);
         */
        }
       document.forms["imiona"].ile_jeszcze.value = 10 - Tablica.length;
       document.forms["imiona"].imie.value = "";
     }
    }
   else window.alert("Tablica jest ju┐ pe│na");
   if (document.forms["imiona"].opcje.checked) f_wypisz();
   document.forms["imiona"].imie.focus();
  }

 function usun(p_lub_k)
  {
   if (Tablica.length != 0)
    {
     if (p_lub_k == 'p')
      {
       for (i = 0; i <= Tablica.length - 2; i++)
        {
         Tablica[i] = Tablica[i + 1];
        }
         /* dla JavaScript w wersji co najmniej 5.5 piszemy po prostu:                      
            do usuniecia elementu z ko±ca:
            Tablica.pop(document.forms["imiona"].imie.value);
            do usuniecia elementu z pocz▒tku:
            Tablica.shift(document.forms["imiona"].imie.value);
         */
      }
      Tablica.length--;
      document.forms["imiona"].ile_jeszcze.value = 10 - Tablica.length;
    }
   else window.alert("Tablica jest pusta");
   if (document.forms["imiona"].opcje.checked) f_wypisz();
   document.forms["imiona"].imie.focus();
  }

 function usun_wszystkie()
  {
   if (window.confirm("Ta operacja wyczy╢ci ca│▒ tablicΩ. Kontunuowaµ?"))
    {
     Tablica.length = 0;
     document.forms["imiona"].ile_jeszcze.value = 10 - Tablica.length;
     if (document.forms["imiona"].opcje.checked) f_wypisz();
     document.forms["imiona"].imie.focus();
    }
  }

 function f_sortuj()
  {
   Tablica = Tablica.sort();
   if (document.forms["imiona"].opcje.checked) f_wypisz();
   document.forms["imiona"].imie.focus();
  }

 function f_odwroc()
  {
   Tablica = Tablica.reverse(); 
   if (document.forms["imiona"].opcje.checked) f_wypisz();
   document.forms["imiona"].imie.focus();
  }

 function f_wypisz()
  {
   s = "Oto nasza tablica: ";
   s += Tablica.join(", ");
   document.forms["imiona"].wypisane.value = s;
   document.forms["imiona"].imie.focus();
  }

//-->
</SCRIPT>

Natomiast tΩ czΩ╢µ umie╢µ w sekcji cia│a:

<FORM name=imiona>
Zosta│o wolnych miejsc w tablicy: 
<INPUT TYPE=text readonly SIZE=1 name=ile_jeszcze VALUE=10><BR>
Wpisz tutaj imiΩ: <INPUT TYPE=text SIZE=20 name=imie><BR>
<INPUT TYPE=button VALUE="Dodaj na koniec" onClick="dodaj('k')" name=dodaj_k>
<INPUT TYPE=button VALUE="Dodaj na pocz▒tek" onClick="dodaj('p')" name=dodaj_p><BR><BR>
<INPUT TYPE=button VALUE="Usu± z ko±ca" onClick="usun('k')" name=usun_k>
<INPUT TYPE=button VALUE="Usu± z pocz▒tku" onClick="usun('p')" name=usun_p>
<INPUT TYPE=button VALUE="Wyczy╢µ wszystko" onClick="usun_wszystkie()" name=wyczysc><BR><BR>
<INPUT TYPE=button VALUE="Sortuj" onClick="f_sortuj()" name=sortuj>
<INPUT TYPE=button VALUE="Odwr≤µ" onClick="f_odwroc()" name=odwroc><BR><BR>
<INPUT TYPE=button VALUE="Wypisz" onClick="f_wypisz()" name=wypisz>
<INPUT TYPE=checkbox VALUE=autowypisywanie checked name=opcje> wypisywaµ automatycznie<BR>
<INPUT TYPE=text SIZE=80 name=wypisane>
</FORM>

Co w praktyce wygl▒da nastΩpuj▒co: